<template>
  <div class="login">
    <van-nav-bar title="政务端登录" />
    <van-image :src="backgroundImg" fit="contain" class="background" />
    <div class="container">
      <van-image :src="logoImg" fit="contain" class="logo-img" />
      <div class="title">农村建房审批安全监管系统</div>
      <div class="login-box">
        <van-tabs v-model:active="active" color="#FFC000" title-active-color="#262626" title-inactive-color="#B5B7BA" class="tabs-box">
          <van-tab title="登录" name="a">
            <van-form @submit="onSubmit" class="login-form">
              <van-field
                v-model="username"
                name="username"
                label="账号"
                placeholder="请输入账号"
                label-width="50px"
                class="field-item"
                :rules="[{ required: true, message: '请输入账号' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="请输入密码"
                label-width="50px"
                class="field-item"
                :rules="[{ validator: validatorPassword }]"
              />
              <div style="margin: 16px">
                <van-button round block color="#1989fa" class="login-btn" native-type="submit">登录</van-button>
              </div>
            </van-form>
          </van-tab>
        </van-tabs>
      </div>
      <div class="desc">农村建房审批安全监管系统</div>
    </div>
  </div>
</template>

<script>
import imgSrc from '@/assets/Images/banner.png'
import { reactive, toRefs } from 'vue'
import { userLoginWechatUser } from '@/service/login'
import { useRouter } from 'vue-router'
import backgroundImg from '@/assets/Images/login_background.png'
import logoImg from '@/assets/Images/logo.png'
export default {
  name: 'GovernmentBind',
  setup() {
    const router = useRouter()
    const state = reactive({
      active: 'a',
      imgSrc: imgSrc,
      username: '',
      password: '',
      backgroundImg: backgroundImg,
      logoImg: logoImg,
    })
    // 提交登录或注册表单
    const onSubmit = async (values) => {
      const { data, success } = await userLoginWechatUser({
        account: values.username,
        password: values.password,
        type: 1,
      })
      if (success) {
        sessionStorage.setItem('govern_token', data.token)
        sessionStorage.setItem('nickName_govern', data.name ? data.name : '')
        router.push({ path: '/government' })
      }
    }
    const validatorPassword = (val) => {
      if (!val || val == null) {
        return '请输入密码'
      } else if (val.length < 6) {
        return '输入密码需大于6位数'
      } else {
        return true
      }
    }
    return {
      ...toRefs(state),
      onSubmit,
      validatorPassword,
    }
  },
}
</script>

<style lang="less" scoped>
.login {
  background-color: rgb(246, 245, 250);
  max-width: 375px;
  margin: 0 auto;
  height: 755px;
  .background {
    width: 100%;
    height: 340px;
  }
  .container {
    box-sizing: border-box;
    position: absolute;
    top: 80px;
    width: 100%;
    max-width: 375px;
    padding: 0 15px;
    text-align: center;
    .logo-img {
      height: 109px;
    }
    .title {
      font-size: 22px;
      font-weight: bold;
      color: #ffffff;
    }
    .desc {
      font-size: 12px;
      font-weight: 400;
      color: #000000;
      padding-bottom: 20px;
    }
    .login-box {
      width: 100%;
      max-width: 342px;
      background: #ffffff;
      box-shadow: 0px 5px 10px 0px rgba(192, 201, 218, 0.2);
      border-radius: 17px;
      margin: 45px 0 90px;
      padding: 10px 0 10px;
      .login-form {
        padding-top: 25px;
        .field-item {
          margin-top: 25px;
          font-size: 15px;
          font-weight: 400;
          color: #262626;
        }
        .login-btn {
          margin-top: 50px;
          background: linear-gradient(90deg, #206dec, #359eff);
          border-radius: 21px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}
.tabs-box {
  margin: 20px 20px;
  /deep/ .van-tab {
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
